<template>
  <div class="wrapper" :class="[classObj, { pageFullscreen }]">
    <!-- 加载模板组件入口 -->
    <component :is="'layout-' + theme.layout" :collapse="collapse" :device="device" :fixed-header="theme.fixedHeader" :show-tabs="theme.showTabs" />
    <!-- <el-backtop target="#app" /> -->
  </div>
</template>

<script>
  import { computed, defineComponent, onBeforeMount, onBeforeUnmount } from 'vue'
  import { useStore } from 'vuex'

  export default defineComponent({
    name: 'Layouts',
    setup() {
      const store = useStore()

      const pageFullscreen = computed(() => store.getters['settings/getPageFullscreen'])

      const device = computed(() => store.getters['settings/device'])
      const collapse = computed(() => store.getters['settings/collapse'])
      // 根据theme的layout加载对于模板
      const theme = computed(() => store.getters['settings/theme'])

      const toggleDevice = (device) => store.dispatch('settings/toggleDevice', device)
      const foldSideBar = () => store.dispatch('settings/foldSideBar')
      const openSideBar = () => store.dispatch('settings/openSideBar')
      const updateTheme = () => store.dispatch('settings/updateTheme')

      let isMobile = false
      let oldLayout = ''

      const classObj = computed(() => {
        return {
          mobile: device.value === 'mobile',
        }
      })

      const handleLayouts = () => {
        //先隐藏 引发请求多次bug
        // const isMobileTemp =
        //   document.body.getBoundingClientRect().width - 1 < 992
        // if (isMobileTemp !== isMobile) {
        //   if (isMobileTemp) {
        //     oldLayout = theme.value.layout
        //     foldSideBar()
        //   } /*  else openSideBar() */
        //   theme.value.layout = isMobileTemp ? 'vertical' : oldLayout
        //   toggleDevice(isMobileTemp ? 'mobile' : 'desktop')
        //   isMobile = isMobileTemp
        // }
      }

      onBeforeMount(() => {
        oldLayout = theme.value.layout
        window.addEventListener('resize', handleLayouts)
        handleLayouts()
        updateTheme()
      })
      onBeforeUnmount(() => {
        if (isMobile) theme.value.layout = oldLayout
        window.removeEventListener('resize', handleLayouts)
      })

      return {
        theme,
        device,
        classObj,
        collapse,
        foldSideBar,
        openSideBar,
        toggleDevice,
        pageFullscreen,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 98;

    [class*='layout-'] {
      position: relative;

      :deep() {
        .layout-header {
          // height: 50px;
          box-shadow: $base-box-shadow;
        }
      }

      &.fixed {
        padding-top: $base-nav-height + $base-tabs-height; // + $base-tabs-height
      }

      &.fixed.no-tabs-bar {
        padding-top: $base-nav-height;
      }
    }

    :deep() {
      .fixed-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 998;
        width: 100%;
      }

      .vui-main {
        position: relative;
        width: auto;
        min-height: 100%;
        margin-left: $base-left-menu-width;

        &.is-collapse-main {
          margin-left: $base-left-menu-width-min;

          .fixed-header {
            left: $base-left-menu-width-min;
            width: calc(100% - #{$base-left-menu-width-min});
          }
        }
      }
      .vui-main.vui-pda {
        margin-left: 0;
      }
    }

    /* 手机端开始 */
    &.mobile {
      :deep() {
        .layout-vertical {
          .el-scrollbar.vui-side-bar.is-collapse {
            width: 0;
          }

          .vui-main {
            .fixed-header {
              left: 0;
              width: 100%;
            }

            width: 100%;
            margin-left: 0;
          }
        }

        /* 隐藏分页和页码跳转 */
        .el-pager,
        .el-pagination__jump {
          display: none;
        }
      }
    }

    /* 手机端结束 */
  }
</style>
